<style>
		#dialog-work-code{ font-size: 80%; }
		#tableChoosingMaterial
		{
			border: 0px;
		}
		
		#tableChoosingMaterial td
		{
			border: 0px;
		}
		.ui-dialog-titlebar {
    	font-size: 13px;
    	 }

}
		
</style>
<script type="text/javascript">
	var trActived;
	var rowData;
	
	$(function(){
		$( "#dialog-work-code" ).dialog({
			resizable:false,
			autoOpen: false,
			width: 500,
			close: function() {
			}
		});
		
		jQuery("#jqgrid-work").jqGrid({
			url:'worksearch.do',
			datatype: "json",
			colNames:['<bean:message key="popup.worksearch.col.workCode"/>',
			          '<bean:message key="popup.worksearch.col.workName"/>'],
			colModel:[
			    {name:'workId',index:'workId',sortable:false, width:130},
			    {name:'workName',index:'workName',sortable: false, width:260}
			],
			sortname: 'workName',
			viewrecords: true,
			sortorder: "desc",
			sortable: true,
			jsonReader: {
			  repeatitems: false,
			  root: "listWorks"
			},
			onSelectRow: function (rowid,status) {
				rowData = $('#jqgrid-work').getRowData(rowid);
			},
			ondblClickRow: function (rowid,iRow,iCol,e) {
                rowData = $('#jqgrid-work').getRowData(rowid);
                setSelectedRowDataToWorkRegion();
                $( "#dialog-work-code" ).dialog( "close" );
            }
		});
	});
	
	function setSelectedRowDataToWorkRegion() {
		if (rowData) {
			var selectedRowIndex = $(trActived).parent().children().index($(trActived));
			checkWorkNameChange(selectedRowIndex);
			$(trActived).find('input[name*="workCode"]').val(rowData['workId']);
			$(trActived).find('label[id="workName"]').text(rowData['workName']);
			$(trActived).find('input[id="hiddenWorkName"]').val(rowData['workName']);
		}
	}
	
	function findWorkCode(btnFind) {
		jQuery("#jqgrid-work").jqGrid().clearGridData();
		trActived = $(btnFind).parent().parent();
    	$( "#dialog-work-code" ).dialog( "open" );
    	$.getJSON("divlist.do?guid=" + generateGuid(),
   			function(data){
   				$("select[id='division']").removeOption(/./);
   				$.each(data.listDivisions, function(i,divisionObj){
   				  $("select[id='division']").addOption(divisionObj.divisionCode, divisionObj.divisionName, divisionObj.selected);                                          
   				});
   			});
   		
   		$.getJSON("deptlist.do?guid=" + generateGuid(),
   			function(data){
   				$("select[id='department']").removeOption(/./);
   				$.each(data.listDepts, function(i,deptObj){
   				  $("select[id='department']").addOption(deptObj.departmentCode, deptObj.departmentName, deptObj.selected);                                          
   				});
   			});
    }
	
	function searchWork() {
		var divisionSelected = $("select[id='division']").selectedValues();
		var deptSelected = $("select[id='department']").selectedValues();
		var newUrl = "worksearch.do?division=" + divisionSelected[0] + "&department=" + deptSelected[0];
		jQuery("#jqgrid-work").jqGrid().setGridParam({url : newUrl}).trigger("reloadGrid");
	}
	
	function selectWork() {
		setSelectedRowDataToWorkRegion();
		$( "#dialog-work-code" ).dialog( "close" );
	}
	
	function onChangeDivision(divisionId) {
		$.getJSON("deptlist.do?division="+divisionId+"&guid=" + generateGuid(),
			function(data){
				$("select[id='department']").removeOption(/./);
				$.each(data.listDepts, function(i,deptObj){
				  $("select[id='department']").addOption(deptObj.departmentCode, deptObj.departmentName, deptObj.selected);                                          
				});
			});
	}
</script>
<div style="font-size: 60%;">
<div id="dialog-work-code" title="<bean:message key="popup.worksearch.title"/>">
	<div id="filter">
		<div style="float:left; valign:middle;">
		<table id="tableChoosingMaterial">
		<tr>
		<td><bean:message key="popup.lbl.division"/></td>
		<td><select id="division" style="margin-right: 20px;" onchange="onChangeDivision(this.options[selectedIndex].value);"/></td>
		<td><bean:message key="popup.lbl.department"/></td>
		<td><select id="department"/></td>
		</tr>
		</table>
		</div>
		<div style="float:right; padding-right: 40;">
			<input type="button" value="<bean:message key="popup.btn.search"/>" onclick="searchWork();">
		</div>
	</div>
	<div class="clear"></div>
	<div id="work-list">
		<table id="jqgrid-work"></table>
	</div>
	<div class="clear"></div>
	<div style="float:right; margin-bottom: 10px;  padding-right: 40;">
		<input class="input" type="button" value="<bean:message key="popup.btn.select"/>" onclick="selectWork();">
	</div>
</div>
</div>